import React, {useState, useEffect} from 'react';
import {Card, Col, Row} from "antd";
import {MoneyCollectOutlined, FileDoneOutlined, FundViewOutlined, StarOutlined} from "@ant-design/icons";
import './style/oview.css'
import Panel from "../../../components/Panel/Index";
import {get} from "../../../service";
import {numToThousand} from '../../../utils/index'
import PieChart from "./PieChart";
import MapChart from "./MapChart";
import TopChart from "./TopChart";
import BarChart from "./BarChart";
import LineChart from "./LineChart";
import WordCloudChart from "./WordCloudChart";
function OverView(props) {
    const [statistic, setStatistic] = useState({})
    useEffect(() => {
        get('/api/overview/statistic').then(res => {
            setStatistic(res.record)
        })
    }, [])
    return (
        <Panel title='业务概览'>
            <div className="m-overview">
                <Row gutter={10}>
                    <Col span={6}>
                        <Card>
                            <div className="header">
                                <div className="content">
                                    <span>总销售额(元)</span>
                                    <span>{numToThousand(statistic.totalTurnover)}</span>
                                </div>
                                <div className="icon">
                                    <MoneyCollectOutlined/>
                                </div>
                            </div>
                            <div className="footer">
                                同比增长：{statistic.turnoverGrowth}
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <div className="header">
                                <div className="content">
                                    <span>总销售量(个)</span>
                                    <span>{numToThousand(statistic.totalQuantity)}</span>
                                </div>
                                <div className="icon" style={{background: "rgba(110, 169, 191,0.68)"}}>
                                    <FileDoneOutlined/>
                                </div>
                            </div>
                            <div className="footer">
                                同比增长：{statistic.quantityGrowth}
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <div className="header">
                                <div className="content">
                                    <span>总访问量(个)</span>
                                    <span>{numToThousand(statistic.totalVisited)} </span>
                                </div>
                                <div className="icon" style={{background: "rgba(179, 165,99,0.68)"}}>
                                    <FundViewOutlined/>
                                </div>
                            </div>
                            <div className="footer">
                                同比增长：{statistic.visitedGrowth}
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <div className="header">
                                <div className="content">
                                    <span>总收藏量(个)</span>
                                    <span>{numToThousand(statistic.totalStars)} </span>
                                </div>
                                <div className="icon" style={{background: "rgba(88, 96, 154,0.68)"}}>
                                    <StarOutlined/>
                                </div>
                            </div>
                            <div className="footer">
                                同比增长：{statistic.startsGrowth}
                            </div>
                        </Card>
                    </Col>
                </Row>
                <Row gutter={10} style={{marginTop: 10}}>
                    <Col span={7}>
                        <Card className="chart-card" title='不同类型商品销售额占比'>
                            <PieChart/>
                        </Card>
                    </Col>
                    <Col span={10}>
                        <Card className="chart-card" title='全国商品销售量分布'>
                            <MapChart/>
                        </Card>
                    </Col>
                    <Col span={7}>
                        <Card className="chart-card" title='销售量排名TOP 10'>
                            <TopChart/>
                        </Card>
                    </Col>
                </Row>
                <Row gutter={10} style={{marginTop: 10}}>
                    <Col span={7}>
                        <Card className="chart-card" title='销售额排名Top 10'>
                            <BarChart/>
                        </Card>
                    </Col>
                    <Col span={10}>
                        <Card className="chart-card" title='销售额增长趋势'>
                            <LineChart/>
                        </Card>
                    </Col>
                    <Col span={7}>
                        <Card className="chart-card" title='热搜词'>
                            <WordCloudChart/>
                        </Card>
                    </Col>
                </Row>
            </div>
        </Panel>
    );
}

export default OverView;